<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Areas Interpolation</title>
    <link rel="stylesheet" type="text/css" href="../../css/styles.css"/>
    <script type="text/javascript" src="../../lib/d3.js"></script>
</head>

<body>

<script type="text/javascript">
    var width = 500,
        height = 500,
        margin = 30,
        x = d3.scale.linear()
            .domain([0, 10])
            .range([margin, width - margin]),
        y = d3.scale.linear()
            .domain([0, 10])
            .range([height - margin, margin]);
        
    var data = d3.range(11).map(function(i){
        return {x: i, y: Math.sin(i)*3 + 5};
    });
    
    var svg = d3.select("body").append("svg");
    
    svg.attr("height", height)
        .attr("width", width);        
    
    renderAxes(svg);
        
    render("linear");    
    
    renderDots(svg);
    
    function render(mode){
        var line = d3.svg.line()
                .interpolate(mode) // <-A
                .x(function(d){return x(d.x);})
                .y(function(d){return y(d.y);});
                
        svg.selectAll("path.line")
                .data([data])
            .enter()
                .append("path")
                .attr("class", "line");                
                
        svg.selectAll("path.line")
                .data([data])       
            .attr("d", function(d){return line(d);});        
            
        var area = d3.svg.area()
            .interpolate(mode) // <-B
            .x(function(d) { return x(d.x); })
            .y0(y(0))
            .y1(function(d) { return y(d.y); });
            
        svg.selectAll("path.area")
                .data([data])
            .enter()
                .append("path")
                .attr("class", "area")
                
        svg.selectAll("path.area")
            .data([data])
            .attr("d", function(d){return area(d);});        
    }
    
    function renderDots(svg){        
         svg.append("g").selectAll("circle")
            .data(data)
          .enter().append("circle")
            .attr("class", "dot")
            .attr("cx", function(d) { return x(d.x); })
            .attr("cy", function(d) { return y(d.y); })
            .attr("r", 4.5);
    }
    
    function renderAxes(svg){            
        var xAxis = d3.svg.axis()
                .scale(d3.scale.linear().range([0, quadrantWidth()]))
                .orient("bottom");            
                
        var yAxis = d3.svg.axis()
                .scale(d3.scale.linear().range([quadrantHeight(), 0]))
                .orient("left");
        
        svg.append("g")        
            .attr("class", "axis")
            .attr("transform", function(){
                return "translate(" + xStart() + "," + yStart() + ")";
            })
            .call(xAxis);
            
        svg.append("g")        
            .attr("class", "axis")
            .attr("transform", function(){
                return "translate(" + xStart() + "," + yEnd() + ")";
            })
            .call(yAxis);
    }
        
    function xStart(){
        return margin;
    }        
    
    function yStart(){
        return height - margin;
    }
    
    function xEnd(){
        return width - margin;
    }
    
    function yEnd(){
        return margin;
    }
    
    function quadrantWidth(){
        return width - 2 * margin;
    }
    
    function quadrantHeight(){
        return height - 2 * margin;
    }
</script>

<h4>Interpolation Mode:</h4>
<div class="control-group">
    <button onclick="render('linear')">linear</button>
    <button onclick="render('linear-closed')">linear-closed</button>
    <button onclick="render('step-before')">step-before</button>
    <button onclick="render('step-after')">step-after</button>
    <button onclick="render('basis')">basis</button>
    <button onclick="render('basis-open')">basis-open</button>
</div>
<div class="control-group">
    <button onclick="render('basis-closed')">basis-closed</button>
    <button onclick="render('bundle')">bundle</button>
    <button onclick="render('cardinal')">cardinal</button>
    <button onclick="render('cardinal-open')">cardinal-open</button>
    <button onclick="render('cardinal-closed')">cardinal-closed</button>
    <button onclick="render('monotone')">monotone</button>    
</div>

</body>

</html>